<template>
	<div>
		<el-card style="margin: 3px;" class="c-card-form">
			<template #header v-show="title">
				<span class="titleP">{{ title }}</span>
				<slot name="infoBox" />
				<div class="editBox" v-if="editOrSave == 'edit'"><el-button size="small"
						@click="emits('edit')">修改</el-button></div>
				<div class="editBox" v-else-if="editOrSave == 'save'"><el-button size="small"
						@click="emits('save')">保存</el-button></div>
			</template>
			<div class="infoBox">
				<MkForm ref="formRef" :model="model" :formId="formId" :col="col" class="formBox">
					<slot />
				</MkForm>
			</div>
		</el-card>
	</div>
</template>

<script lang='ts' setup>
// TODO 没有说明此组件的作用
defineOptions({
	name: 'MkCardForm'
})
import { ElForm } from 'element-plus';
const props = defineProps({
	title: { type: String, default: undefined },
	model: { type: Object, default: () => { } },
	editOrSave: { type: String, default: undefined },
	formId: { type: String, default: "productLine" },
	col: { type: Number, default: 4, },
})
const formRef = ref(ElForm)
const validateFn = async (callback: Function) => {
	await formRef.value.validate((valid: boolean) => {
		callback(valid)
	})
}
defineExpose({ validateFn })
const emits = defineEmits(['edit', 'save'])
</script>

<style lang='scss' scoped>
.c-card-form {
	margin: 3px 5px;
	position: relative;

	:deep(.el-card__body) {
		padding: 10px 15px;
	}

	:deep(.el-card__header) {
		padding: 0 5px;
	}

	.titleP {
		font-size: 1.3em;
		font-weight: 800;
		margin: 0;
	}

	.editBox {
		position: absolute;
		top: 0;
		right: 0;
	}

	.infoBox {
		width: 100%;
		// display: flex;

		.formBox {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			:deep(.el-form-item) {
				margin-bottom: 3px;
			}
		}
	}
}
</style>